<template>
  <div>
    <a-card title="查询条件">
      <a-row>
        <a-col class="param_item_label" :span="2">名称：</a-col>
        <a-col :span="3">
          <a-input v-model:value="param.name"/>
        </a-col>
        <a-col :span="1"/>
        <a-col class="param_item_label" :span="2">请求路径：</a-col>
        <a-col :span="3">
          <a-input v-model:value="param.url"/>
        </a-col>
        <a-col :span="1"/>
        <a-col class="param_item_label" :span="2">类型：</a-col>
        <a-col :span="3">
          <a-select v-model:value="param.type" style="width: 100%">
            <a-select-option value="">全部</a-select-option>
            <a-select-option value="0">目录</a-select-option>
            <a-select-option value="1">菜单</a-select-option>
            <a-select-option value="2">按钮</a-select-option>
          </a-select>
        </a-col>
        <a-col :span="1"/>
      </a-row>
      <br>
      <div class="operation_row">
        <a-button type="primary" @click="getPage(1,10)">查询</a-button>
      </div>
    </a-card>
    <br>
    <a-card title="资源列表">
      <template #extra>
        <a-button type="primary" @click="openAddModal">添加</a-button>
      </template>
      <a-table rowKey="id" :columns="columns" :dataSource="dataSource" :pagination="pagination" :loading="loading"
               bordered>
        <template #parentName="{ record }">
          <span>
            {{ record.parentName ? record.parentName : '根节点' }}
          </span>
        </template>
        <template #type="{ record }">
          <span>
            {{ record.type === 0 ? '目录' : record.type === 1 ? '菜单' : '按钮' }}
          </span>
        </template>
        <template #action="{ record }">
          <span>
            <a @click="openUpdateModal(record)">修改</a>
            <a-divider type="vertical"/>
            <a-popconfirm title="确认删除该资源吗?" @confirm="commitDelete(record)">
              <a>删除</a>
            </a-popconfirm>
          </span>
        </template>
      </a-table>
    </a-card>
    <!-- 新增弹窗 -->
    <a-modal v-model:visible="addModalShow" title="添加新资源" @ok="commitAdd">
      <a-form :model="addResources" :label-col="{span: 6}" :wrapper-col="{span: 16}">
        <a-form-item label="名称">
          <a-input v-model:value="addResources.name"/>
        </a-form-item>
        <a-form-item label="父节点">
          <a-tree-select v-model:value="addResources.parentId" :treeData="parentTree" :replaceFields="replaceFields"
                         style="width: 100%" show-search tree-default-expand-all/>
        </a-form-item>
        <a-form-item label="请求路径">
          <a-input v-model:value="addResources.url"/>
        </a-form-item>
        <a-form-item label="资源类型">
          <a-select v-model:value="addResources.type" style="width: 100%">
            <a-select-option value="0">目录</a-select-option>
            <a-select-option value="1">菜单</a-select-option>
            <a-select-option value="2">按钮</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="vue标识">
          <a-input v-model:value="addResources.vueMark"/>
        </a-form-item>
        <a-form-item label="vue路径">
          <a-input v-model:value="addResources.vuePath"/>
        </a-form-item>
        <a-form-item label="vue组件路径">
          <a-input v-model:value="addResources.vueComponent"/>
        </a-form-item>
        <a-form-item label="图标">
          <a-input v-model:value="addResources.icon"/>
        </a-form-item>
        <a-form-item label="排序标识">
          <a-input v-model:value="addResources.order"/>
        </a-form-item>
      </a-form>
    </a-modal>
    <!-- 修改弹窗 -->
    <a-modal v-model:visible="updateModalShow" title="修改资源信息" @ok="commitUpdate">
      <a-form :model="updateResources" :label-col="{span: 6}" :wrapper-col="{span: 16}">
        <a-form-item label="ID">
          <a-input v-model:value="updateResources.id" :disabled="true"/>
        </a-form-item>
        <a-form-item label="名称">
          <a-input v-model:value="updateResources.name"/>
        </a-form-item>
        <a-form-item label="父节点">
          <a-tree-select v-model:value="updateResources.parentId" :treeData="parentTree" :replaceFields="replaceFields"
                         style="width: 100%" show-search tree-default-expand-all/>
        </a-form-item>
        <a-form-item label="请求路径">
          <a-input v-model:value="updateResources.url"/>
        </a-form-item>
        <a-form-item label="资源类型">
          <a-select v-model:value="updateResources.type" style="width: 100%">
            <a-select-option :value="0">目录</a-select-option>
            <a-select-option :value="1">菜单</a-select-option>
            <a-select-option :value="2">按钮</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="vue标识">
          <a-input v-model:value="updateResources.vueMark"/>
        </a-form-item>
        <a-form-item label="vue路径">
          <a-input v-model:value="updateResources.vuePath"/>
        </a-form-item>
        <a-form-item label="vue组件路径">
          <a-input v-model:value="updateResources.vueComponent"/>
        </a-form-item>
        <a-form-item label="图标">
          <a-input v-model:value="updateResources.icon"/>
        </a-form-item>
        <a-form-item label="排序标识">
          <a-input v-model:value="updateResources.order"/>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script>
import { defineComponent, getCurrentInstance, onMounted, reactive, toRefs } from 'vue'
import {
  AddResources,
  DeleteResources,
  GetResourcesDetail,
  GetResourcesPage,
  GetResourcesTree,
  UpdateResources
} from '@/service/auth'

export default defineComponent({
  setup () {
    const { proxy } = getCurrentInstance()
    const state = reactive({
      param: {
        name: '',
        url: '',
        type: '',
        vueMark: '',
        vuePath: '',
        vueComponent: ''
      },
      loading: true,
      dataSource: [],
      pagination: {
        current: 1,
        pageSize: 10,
        total: 0,
        onChange: async (page) => {
          state.pagination.current = page
          await GetResourcesPage()
        }
      },
      columns: [{
        title: '名称',
        dataIndex: 'name',
        width: '15%'
      }, {
        title: '父节点',
        dataIndex: 'parentName',
        width: '15%',
        slots: {
          customRender: 'parentName'
        }
      }, {
        title: '类型',
        dataIndex: 'type',
        width: '10%',
        slots: {
          customRender: 'type'
        }
      }, {
        title: '请求路径',
        dataIndex: 'url',
        width: '30%'
      }, {
        title: 'vue标识',
        dataIndex: 'vueMark',
        width: '15%'
      }, {
        title: '操作',
        key: 'action',
        slots: {
          customRender: 'action'
        }
      }],
      parentTree: [],
      replaceFields: {
        key: 'id',
        value: 'id',
        title: 'name',
        children: 'childList'
      },
      addModalShow: false,
      addResources: {
        name: '',
        parentId: '',
        url: '',
        type: '1',
        vueMark: '',
        vuePath: '',
        vueComponent: '',
        icon: '',
        order: 0
      },
      updateModalShow: false,
      updateResources: {
        id: '',
        name: '',
        parentId: '',
        url: '',
        type: '1',
        vueMark: '',
        vuePath: '',
        vueComponent: '',
        icon: '',
        order: 0
      }
    })

    const methods = reactive({
      getPage: async (page, size) => {
        state.loading = true
        const {
          count,
          list
        } = await GetResourcesPage(state.param.name, state.param.url, state.param.type, page, size)
        state.pagination.current = page
        state.pagination.pageSize = size
        state.pagination.total = count
        state.dataSource = list
        state.loading = false
      },
      openAddModal: async () => {
        state.loading = true
        state.parentTree = [{
          id: '0',
          name: '根节点',
          childList: await GetResourcesTree()
        }]
        state.addResources = {
          name: '',
          parentId: '',
          url: '',
          type: '1',
          vueMark: '',
          vuePath: '',
          vueComponent: '',
          icon: '',
          order: 0
        }
        state.addModalShow = true
        state.loading = false
      },
      commitAdd: async () => {
        await AddResources(state.addResources)
        proxy.$message.success(`添加资源[${state.addResources.name}]成功！`)
        state.addModalShow = false
        await methods.getPage(1, 10)
      },
      openUpdateModal: async (resources) => {
        state.loading = true
        state.parentTree = [{
          id: '0',
          name: '根节点',
          childList: await GetResourcesTree(resources.id)
        }]
        state.updateResources = await GetResourcesDetail(resources.id)
        state.updateModalShow = true
        state.loading = false
      },
      commitUpdate: async () => {
        await UpdateResources(state.updateResources)
        proxy.$message.success('修改资源信息成功！')
        state.updateModalShow = false
        await methods.getPage(1, 10)
      },
      commitDelete: async (resources) => {
        await DeleteResources(resources.id)
        proxy.$message.success(`删除资源[${resources.name}]成功！`)
        await methods.getPage(1, 10)
      }
    })

    onMounted(async () => {
      await methods.getPage(1, 10)
    })

    return {
      ...toRefs(state),
      ...toRefs(methods)
    }
  }
})
</script>

<style lang="less" scoped>

</style>
